<!-- 公共-详情描述 -->
<template>
  <view class="detail-box-container">
    <view
      v-for="(item, index) in CERTERCHEMA"
      :key="index"
      class="detail-box"
      :style="{
        width: setWidth(arrange),
      }"
    >
      <view
        class="u-flex u-row-between"
        :class="item.namePosition == 'left' ? 'detail-item-box' : 'detail-item-box-top'"
        :style="{
          justifyContent: arrange > 1 ? 'flex-start' : 'space-between',
        }"
      >
        <view class="text-box">{{ item.name }}:</view>
        <slot v-if="item.slot" :name="item.slot" :row="describeData"></slot>
        <text class="value-box" v-else>
          {{ renderingData(item) }}
        </text>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  name: 'zcgDescribe',
  props: {
    columns: {
      type: Array,
      default: () => [],
    },
    describeData: {
      type: Object,
      default: () => ({}),
    },
    //默认列数
    arrange: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      CERTERCHEMA: [],
    }
  },
  methods: {
    setWidth(arrange) {
      return `calc(100% / ${arrange})`
    },
    async getDictData() {
      let tagcolums = this.columns.map((i) => {
        return {
          name: i.name,
          key: i.key,
          isShow: i.isShow == false ? false : true,
          namePosition: i.namePosition ? i.namePosition : 'left',
          slot: i.slot,
          items: i.items,
        }
      })
      this.CERTERCHEMA = tagcolums.filter((i) => i.isShow)
    },
    renderingData(item) {
      return this.describeData[item.key]
    },
  },
  mounted() {
    this.getDictData()
  },
}
</script>
<style lang="scss" scoped>
.detail-box-container {
  display: flex;
  flex-wrap: wrap;
  .detail-box {
    font-size: 24rpx;
    .detail-item-box {
      line-height: 60rpx;
      padding: 0 24rpx;
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      .text-box {
        white-space: nowrap;
        text-align: right;
        width: 150rpx;
      }
      .value-box {
        display: inline-block;
        white-space: pre-wrap;
        word-wrap: break-word;
        word-break: break-all;
        height: auto;
      }
    }
    .detail-item-box-top {
      line-height: 60rpx;
      padding: 0 24rpx;
      display: flex;
      flex-direction: column;
      .text-box {
        white-space: nowrap;
        text-align: right;
        width: 150rpx;
      }
      .value-box {
        display: inline-block;
        white-space: pre-wrap;
        word-wrap: break-word;
        word-break: break-all;
        height: auto;
      }
    }
  }
}
</style>
